import React from 'react';
import { Icon, Button ,Divider, Form } from 'semantic-ui-react'
import { withRouter } from "react-router-dom";
import './Login.css'
import axios from 'axios'


class Login extends React.Component {
    constructor(props){
        // console.log(props)
        super(props);
        this.state = {
            username:'',
            password:''
        }
    }
    handleLogin = ()=>{
        axios.post('users/login',{
            uname:this.state.username,
            pwd:this.state.password
        }).then(res=>{
           if(res.meta.status === 200){
            //    保存token到本地缓存中
            sessionStorage.setItem('mytoken',res.data.token)
            sessionStorage.setItem('uid',res.data.uid)
                // 登陆成功后跳转到该页面
               let {history} = this.props;
               history.push('/home');
           }
        })
    }
    handleUname=(e)=>{
        this.setState({
            username:e.target.value
        })
    }
    handlePwd=(e)=>{
        this.setState({ 
            password:e.target.value
        })
    }
    render(){
        return (
           <div className="login-container">
            <div className="login-logo">
              <Icon size='huge' name="home"></Icon>
            </div>
            <div className="login-form">
                <Form>
                    <Form.Input 
                     icon='user' 
                     required 
                     size='big' 
                     iconPosition='left' 
                     name='username'
                     palceholder="请输入用户名"
                     onChange={this.handleUname}
                     value={this.state.username}
                    />
                    <Form.Input 
                     icon='lock' 
                     required 
                     size='big' 
                     iconPosition='left' 
                     name='password'
                     palceholder="请输入密码"
                     onChange={this.handlePwd}
                     value={this.state.password}
                    />
                    <Button primary fluid onClick={this.handleLogin}>登陆</Button>
                </Form>
            </div>
            <Divider horizontal>---</Divider>
            <div className="login-third">
                <Icon name="qq" size="big"></Icon>
                <Icon name="wechat" size="big"></Icon>
            </div>
           </div>
         );
    }  
}

export default withRouter(Login)